<template>
  <el-dialog
      width="400px"
      custom-class="custom-theme modify-password-dialog"
      :model-value="props.modelValue"
      :close-on-click-modal="false"
      @close="close">
    <template #title>
      <div class="dialog-title">修改密码</div>
    </template>
    <div class="dialog-body">
      <el-form label-width="100px" ref="pwdFormRef" class="custom-theme" status-icon :model="formData"
               :rules="userRules">
        <el-form-item prop="originalPwd" label="原始密码">
          <el-input class="custom-theme" v-model="formData.originalPwd" type="password" placeholder="请输入原始密码"
                    @keyup.enter.native="confirm"/>
        </el-form-item>
        <el-form-item prop="newPwd" label="新密码">
          <el-input class="custom-theme" v-model="formData.newPwd" type="password" placeholder="请输入新密码"
                    @keyup.enter.native="confirm"/>
        </el-form-item>
        <el-form-item prop="newPwdConfirm" label="确认新密码">
          <el-input class="custom-theme" v-model="formData.newPwdConfirm" type="password" placeholder="请再次输入新密码"
                    @keyup.enter.native="confirm"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button :loading="loading" class="cancel-btn custom-theme" @click="close">取消</el-button>
      <el-button :loading="loading" class="confirm-btn custom-theme" @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import type {FormInstance} from 'element-plus'
import VALIDATE from "@/utils/form-validates";
import {useUserStore} from "@/store/modules/user";
import {encrypt} from "@/utils/encrypt.ts";
import {updatePassword} from "@/api/login";

const store = useUserStore()
const props = defineProps<{
  modelValue: boolean
}>()

const formData = ref({
  originalPwd: '',
  newPwd: '',
  newPwdConfirm: '',
})

function validatePass(rule: any, value: any, callback: any) {
  if (formData.value.newPwd !== formData.value.newPwdConfirm) {
    callback(new Error('两次输入的新密码不一样'))
  } else {
    callback()
  }
}

const userRules = ref({
  originalPwd: [{required: true, trigger: 'blur', validator: VALIDATE.checkPassword}],
  newPwd: [
    {required: true, trigger: 'blur', validator: VALIDATE.checkPassword},
  ],
  newPwdConfirm: [
    {required: true, trigger: 'blur', validator: validatePass}
  ],
})

const emit = defineEmits(['update:modelValue'])

function close() {
  emit('update:modelValue', false)
}

const loading = ref(false)
const pwdFormRef = ref<FormInstance>();

async function confirm() {
  if (pwdFormRef) {
    try {
      // @ts-ignore
      const valid = await pwdFormRef.value.validate();
      if (valid) {
        const oldPassword = formData.value.originalPwd
        const newPassword = formData.value.newPwd
        if (oldPassword && newPassword) {
          const params = {
            oldPassword,
            newPassword,
          }
          try {
            loading.value = true
            const res = await updatePassword(params)
            if (res.code == 200) {
              close()
              store.LogOut().then(() => {
                location.reload()
              })
            } else {
              ElMessage({
                type: 'error',
                message: res.message || res.msg || '修改密码出错'
              })
            }
          } catch (e) {
            let msg = '修改密码出错'
            ElMessage({
              type: 'error',
              message: msg
            })
          }
          loading.value = false
        } else {
          ElMessage({
            type: 'error',
            message: 'jsEncrypt加密出错'
          })
        }
      }
    } catch (e) {

    }
  } else {
    return
  }
}

</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables";

.modify-password-dialog {
  .dialog-title {
    font-size: 24px;
    color: $el-common-dialog-text-color;
    border-bottom: $el-common-dialog-title-bottom-border;
  }

  .cancel-btn.custom-theme {
    background-color: $el-cancel-btn-bg-color;
    color: $el-cancel-btn-text-color;
    border: $el-cancel-btn-border;
  }

  .confirm-btn.custom-theme {
    background-color: $el-confirm-btn-bg-color;
    color: $el-confirm-btn-text-color;
    border: $el-confirm-btn-border;
  }
}
</style>
